<template>
    <div id="index" ref="appRef">
        <div class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <div class="d-flex jc-center">
                    <dv-decoration-10 class="dv-dec-10" />
                    <div class="d-flex jc-center">
                        <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
                        <div class="title">
                            <span class="title-text">本家饭团数据大屏</span>
                            <dv-decoration-6
                                class="dv-dec-6"
                                :reverse="true"
                                :color="['#50e3c2', '#67a1e5']"
                            />
                        </div>
                        <dv-decoration-8
                            class="dv-dec-8"
                            :reverse="true"
                            :color="decorationColor"
                        />
                    </div>
                    <dv-decoration-10 class="dv-dec-10-s" />
                </div>
                <!-- 第二行 -->
                <div class="d-flex jc-between px-2">
                    <div class="d-flex aside-width">
                        <div class="react-left ml-4 react-l-s">
                            <span class="react-left"></span>
                            <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
                        </div>
                        <div class="react-left ml-3">
                            <span class="text"></span>
                        </div>
                    </div>
                    <div class="d-flex aside-width">
                        <!-- bg-color-blue -->
                        <div class="react-right mr-3">
                            <span class="text fw-b"></span>
                        </div>
                        <div class="react-right mr-4 react-l-s">
                            <span class="react-after"></span>
                            <span class="text"></span>
                        </div>
                    </div>
                </div>
                <!-- 第三行数据-大数据统计模块 -->
                <div class="body-box">
                    <!-- 左侧 -->
                    <div class="bj-flexcolumn-between">
                        <div>
                            <!-- <dv-border-box-13> -->
                                <restaurant-progress></restaurant-progress>
                            <!-- </dv-border-box-13> -->
                        </div>
                        <div class="body-h"></div>
                        <div>
                            <!-- <dv-border-box-13> -->
                                <restaurant-propel></restaurant-propel>
                            <!-- </dv-border-box-13> -->
                        </div>
                        <div class="body-h"></div>
                        <div>
                            <!-- <dv-border-box-13> -->
                                <city-ranking></city-ranking>
                            <!-- </dv-border-box-13> -->
                        </div>
                    </div>
                    <!-- 中间 -->
                    <div style="position: relative" class="bj-flexcolumn-between bj-flexitem-1">
                        <collect-echart></collect-echart>
                        <div style="height: 50px"></div>
                        <map-echart></map-echart>
                        <div style="padding: 0px 12px;">
                            <!-- <dv-border-box-12> -->
                                <city-inject></city-inject>
                            <!-- </dv-border-box-12> -->
                        </div>
                    </div>
                    <!-- 右侧 -->
                    <div>
                        <div>
                            <!-- <dv-border-box-12> -->
                                <sales-echart></sales-echart>
                            <!-- </dv-border-box-12> -->
                        </div>
                        <div class="body-h"></div>
                        <div>
                            <!-- <dv-border-box-12> -->
                                <user-growth></user-growth>
                            <!-- </dv-border-box-12> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'
import restaurantProgress from "./components/restaurantProgress.vue";
import restaurantPropel from "./components/restaurantPropel.vue";
import cityRanking from "./components/cityRanking.vue";
import salesEchart from "./components/salesEchart.vue";
import userGrowth from "./components/userGrowth.vue";
import collectEchart from "./components/collectEchart.vue";
import mapEchart from "./components/mapEchart.vue";
import cityInject from "./components/cityInject.vue";
export default {
    mixins: [ drawMixin ],
    components: {
        restaurantProgress,//已开发餐厅进度占比
        restaurantPropel,//近7天餐厅总数和推进情况
        cityRanking,//开发排名前五城市
        salesEchart,//销售情况
        userGrowth,//近7天平台用户增长情况
        collectEchart,//汇总数据
        mapEchart,//地图
        cityInject,//各省会城市餐厅入驻数量
        
    },
    data() {
        return {
            timing: null,
            loading: true,
            dateDay: null,
            dateYear: null,
            dateWeek: null,
            weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
            decorationColor: ['#568aea', '#000000'],
        }
    },
    mounted() {
        this.cancelLoading()
        this.timeFn()
    },
    beforeDestroy () {
        clearInterval(this.timing)
    },
    methods: {
        timeFn() {
            this.timing = setInterval(() => {
                this.dateDay = formatTime(new Date(), 'HH: mm: ss')
                this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
                this.dateWeek = this.weekday[new Date().getDay()]
            }, 1000)
        },
        cancelLoading() {
            setTimeout(() => {
            this.loading = false
            }, 500)
        }
    }
};
</script>
<style lang="scss" scoped>
@import '../assets/scss/index.scss';
.body-h{
    height: 8px;
}
</style>
